<template>
	<view class="home">
		
		<uni-nav-bar class="head-nav"   fixed :backgroundColor="headColor">
			<view class="top" >
				<view class="message">
					<image class="img" :src="chat" mode=""></image>
				</view>
				<view class="center">
					<text class="recommend" :class="{active:show==1}" @tap="show=1">推荐</text>
					<text class="brand" :class="{active:show==2}" @tap="show=2">品牌 </text>
				</view>
				<view class="right">
					<image class="img s" :src="search" mode=""></image>
					<image class="img" :src="cart" mode=""></image>

				</view>

			</view>
		</uni-nav-bar>
		
		<!-- #ifdef APP-PLUS -->
		<view class="status_bar" v-if="show==2">
			<view class="top_view"></view>
		</view>
		<!-- #endif -->
		<!-- 第一屏 -->
		<view v-show="show==1" class="section-home">
			<!-- 轮播 -->
			<swiper class="swiper" :indicator-dots="indicatorDots" :autoplay="true" :interval="5000" :duration="1000">
				<swiper-item v-for="item in list" :key="item.id">
					<image class="img" :src="item.img_url" mode=""></image>
				</swiper-item>
			</swiper>

			<!-- 品类推荐 -->
			<view class="content">
				<view class="category">
					<text class="recommend">品类推荐</text>
					<text @tap="seriesMore" class="more">更多></text>
				</view>
				<!-- 品类推荐图片 -->
				<view class="commodity">
					<view class="background">
						
						
						<swiper class="swiper" previous-margin="80rpx" next-margin="40rpx" >
							<swiper-item class="color" v-for="item in seriesAll" :key="item.id"  @tap="goSeriesMore(item.id)">
							
							</swiper-item>
						</swiper>
						
						
						<view class="color" v-for="item in seriesAll" :key="item.id"  @tap="goSeriesMore(item.id)">
							
								<image  class="img" :src="item.cover_img" mode=""></image>
							
							
							<view class="text a">
								<text>{{ item.cname }}</text>
							</view>
							<view class="text s">
								<text>{{ item.ename }}</text>
							</view>
					
						</view>

					</view>
				</view>
			</view>



			<!-- 特色优选 -->
			<view class="content s">
				<view class="category">
					<text class="recommend">特色优选</text>
					<text class="more" @tap="seriesMore">更多></text>
				</view>

				<!-- 轮播 -->
				<swiper class="swiper" previous-margin="80rpx" next-margin="40rpx" >
					<swiper-item class="swiper-item" v-for="item in hotList" :key="item.id">
						<navigator  :url="'/pages/kind/detail/detail?productId='+item.id">
						<image class="img" :src="item.cover_img" mode=""></image>
						<view class="background">
							<view class="lest">
								<text class="gname"> {{ item.gname }} </text>
								<view class="detail_desc">{{ item.detail_desc }}</view>
								<view class="colors">
									<view class="colorss" v-for="color in item.colors" :key="color" :style="{backgroundColor:color}">
									</view>
								</view>
								<text class="descr">{{ item.descr }}</text>

							</view>
						</view>
					</navigator>
					</swiper-item>
				</swiper>
			</view>

		</view>



		<!-- 第二屏 -->
		
		<view v-show="show==2">
			<Brands></Brands>
		</view>
	</view>
</template>

<script>
	import chat from "../../static/icons/chat.png"
	import cart from "../../static/icons/cart.png"
	import search from "../../static/icons/search.png"
	import uniNavBar from "@/components/uni-nav-bar/uni-nav-bar.vue"
	import Brands from "@/pages/home/barnd/barnd.vue"
	export default {
		components: {
			Brands,uniNavBar
		},
		data() {
			return {
				chat,
				cart,
				search,
				show: 1,
				brandList: [],
				background: ['color1', 'color2', 'color3'],
				indicatorDots: true,
				// 轮播
				list: [],
				// 商品推荐
				seriesAll: [],
				// 尾部轮播
				hotList: []


			}
		},
		created() {
			this.init()
			this.seriesApi()
			this.hotListApi()

		},
	
		methods: {
			goSeriesMore(KindId){
				window.KindId = KindId
				uni.reLaunch({
					
				   url: '/pages/find/find?KindId='+KindId
				});
				
				
			},
			init() {
				uni.request({
					url: 'http://bufantec.com/api/leju/front/home/banners', //仅为示例，并非真实接口地址。
					data: {
						use: 0
					},
					success: (res) => {
						// console.log(res.data);
						this.list = res.data.data
						this.text = 'request success';
					}
				});
			},
			seriesApi() {
				uni.request({
					url: 'http://bufantec.com/api/leju/front/find/seriesAll', //仅为示例，并非真实接口地址。
					success: (res) => {
						// console.log(res.data);
						this.seriesAll = res.data.data
						this.text = 'request success';
					}
				});
			},
			hotListApi() {
				uni.request({
					url: 'http://bufantec.com/api/leju/front/home/hotList', //仅为示例，并非真实接口地址。
					success: (res) => {
						// console.log("hotList", res.data);
						this.hotList = res.data.data
						this.text = 'request success';
					}
				});
			},
				seriesMore(){
							uni.switchTab({
								url: '../find/find'
							})
						}
			
		},
		computed: {
			headColor() {
				return this.show ==1? 'transparent' : '#354E44';
				
			},
			
		}
	}
</script>

<style lang="scss" scoped>
	.status_bar {
		height: var(--status-bar-height);
		width: 100%;
		background-color: #354E44;
	}
	
	.top_view {
		height: var(--status-bar-height);
		width: 100%;
		position: fixed;
		background-color: #354E44;
		top: 0;
		z-index: 999;
	}
	.home {
	
		// 头部
.head-nav{
			// background-color: $leju-base-bg-color;
			
		
			background-color: transparent;
			box-sizing: border-box;
			position: fixed;
			left: 0;
			top: 0;
			z-index: 999;
			border-bottom: none;
			
			/*#ifdef APP-PLUS*/
			margin-top: 50rpx
			 /*#endif*/
			::v-deep .uni-navbar--border{
					border-bottom: none;
			}
		.top {
			
				
				
				
			/*#ifdef APP-PLUS*/
					padding-top: 50rpx;
			 /*#endif*/
			width: 100%;
			// height: 150rpx;
			display: flex;
			position: fixed;
			width: 100%;
			top: 0;
			left: 0;
			opacity: 0.8;
			z-index: 1;

			.message {
				position: absolute;
				margin-left: 30rpx;
				margin-top: 11rpx;
			}

			.center {
				
				margin: 0 auto;
				
				font-family: PingFangSC-Regular;
				font-size: 32rpx;
				color: #FFFFFF;
				letter-spacing: 2.29rpx;
				
				.active {
					border-bottom: 2px solid #fff;

				}

				.recommend {
					margin: 16rpx;
				}

				.brand {
					margin: 16rpx;
				}

			}

			.right {
				position: absolute;
				margin-top: 11rpx;
				right: 30rpx;
				// margin-right: 30rpx;	

				.img.s {
					margin-right: 30rpx;
				}
			}
			
			.img {
				width: 42rpx;
				height: 42rpx;
			}
		}
	}
		// 轮播
		.section-home {
			.swiper {
				height: 462rpx;

				.img {
					width: 100%;
					height: 475rpx;
					// background: #5D4E49;
					border-radius: 0 0 30rpx 30rpx;
					border-radius: 0rpx 0rpx 30rpx 30rpx;
				}
			}

			// 品类推荐
			.content {
				height: 375rpx;

				.category {
					height: 45rpx;
					display: flex;
					margin-top: 40rpx;
					// display: -webkit-flex;
					//   -webkit-justify-content: space-around;
					//   justify-content: space-around;

					.recommend {
						font-family: PingFangSC-Semibold;
						font-size: 32rpx;
						color: #3E3E3E;
						letter-spacing: 2.29rpx;
						margin-left: 40rpx;
					}

					.more {
						line-height: 45rpx;
						font-family: PingFangSC-Regular;
						font-size: 26rpx;
						color: #8C8C8C;
						letter-spacing: 1.86rpx;
						margin-left: 464rpx;

					}

				}

				.commodity {
					margin-top: 39rpx;

					.background {
						display: flex;
						
						// margin-left: 40rpx;
						
							
						.color {
							width: 208rpx;
							height: 140rpx;
							background: #FFFFFF;
							box-shadow: 0 8rpx 24rpx 0 rgba(122, 98, 75, 0.06);
							border-radius: 20rpx;
							border-radius: 20rpx;
							margin-left: 40rpx;
							text-align: center;
						
								.img {
									width: 144rpx;
									height: 124rpx;
									// margin-top:40rpx 
									padding-top: 52rpx;
								
								
							}
						

							.text.a {
								width: 100%;
								margin-top: 44rpx;
								font-family: PingFangSC-Semibold;
								font-size: 26rpx;
								color: #3E3E3E;
								letter-spacing: 1.86rpx;
								
							}

							.text.s {
								font-family: PingFangSC-Regular;

								font-size: 20rpx;
								color: #B0B0B0;
								letter-spacing: 1.43rpx;
								    overflow: hidden; /*自动隐藏文字*/
								    text-overflow: ellipsis;/*文字隐藏后添加省略号*/
								    white-space: nowrap;/*强制不换行*/
									 
							}
						}

					}
				}
			}

			.content.s {
				margin-top: 46rpx;
				
				.swiper {
					width: 100%;
					height: 314rpx;
					margin-top: 39rpx;
				/*#ifdef APP-PLUS*/
					margin-top: 96rpx;
					
				 /*#endif*/
					.swiper-item {
						position: relative;
						width: 590rpx;
						height: 314rpx;

						.img {
							position: absolute;
							left: 44rpx;
							top: 0;
							width: 194rpx;
							height: 280rpx;
							border-radius: 20rpx;
						}

						.background {
							margin-top: 34rpx;
							width: 590rpx;
							height: 260rpx;
							background: #FFFFFF;
							box-shadow: 0 16rpx 48rpx 0 rgba(122, 98, 75, 0.12);
							border-radius: 20rpx;
							border-radius: 20rpx;

							.lest {
								margin-left: 277rpx;
								padding-top: 50rpx;

								.gname {
									font-family: PingFangSC-Semibold;
									font-size: 26rpx;
									color: #3E3E3E;
									letter-spacing: 1.86rpx;
								}

								.detail_desc {
									font-family: PingFangSC-Regular;
									font-size: 18rpx;
									color: #B0B0B0;
									letter-spacing: 1.29rpx;
								}

								.colors {
									display: flex;
									margin-top: 19rpx;

									.colorss {
										width: 20rpx;
										height: 20rpx;
										margin: 0 10rpx 0 0;
										border-radius: 50rpx;
									}
								}

								.descr {
									font-family: PingFangSC-Regular;
									font-size: 22rpx;
									color: #3E3E3E;
									letter-spacing: 1.57rpx;
								}
							}
						}
					}
				}
			}
		}
	}
</style>
